<!-- 还差一个搜索框！一个商品点击跳转 -->

<template>
    <div class="category-box">
        <div class="header">
            <span>分类</span>
            <img @click="router.push({name:'ProductList'})" class="search" src="@/assets/img/Category/icon_search_darkblack2.png" alt="">
        </div>
        <div class="container">
            <ul class="asider">
                <li @click="activeId = item.id" v-for="item in ListMain" :key="item.id">
                    <span v-text="item.name" :class="{ active: activeId === item.id }"></span>
                </li>
            </ul>
            <div class="content">
                <img class="content-img" :src="ListMain[activeId - 1]?.avatar" alt="">

                <ul class="content-item">
                    <p v-text="ListMain[activeId - 1]?.name"></p>
                    <p v-show="!(ListSub.length > 0)">暂无相关商品，敬请期待.....</p>

                    <li @click="router.push({ name: 'ProductList', path: '/productlist', query: { cid: item.id } })"
                        v-for="item in ListSub" :key="item.id">
                        <img class="item-img" :src="item.avatar" alt="">
                        <p class="detail-text" v-text="item.name"></p>
                    </li>

                </ul>
            </div>
        </div>
        <div class="footer">
            <MiNav :status="'Category'"></MiNav>
        </div>
    </div>
</template>
<script lang="ts" setup>
import MiNav from '@/components/MiNav/MiNav.vue';
import { onMounted, ref, shallowRef, watch } from 'vue';
import { CategoryApi } from '@/api'
import { useRouter } from 'vue-router';

const router = useRouter()
const activeId = ref<number>(0)
const ListMain = shallowRef<Vm.Category[]>([])
const ListSub = shallowRef<Vm.Category[]>([])
onMounted(async () => {
    ListMain.value = await CategoryApi.getlist(0)
    activeId.value = ListMain.value[0].id
})

watch(activeId, async () => {
    ListSub.value = await CategoryApi.getlist(activeId.value)
})

</script>
<style lang="stylus" scoped>
.category-box
    width 100%
    height 100%
    display flex
    flex-direction column

.header,.footer
    flex-shrink 0

.header
    height 12vw
    display flex
    justify-content center
    align-items center
    position relative
    border-bottom 1px solid rgb(239, 239, 240);

.search
    width 8vw
    height 8vw
    position absolute
    top 50%
    transform translateY(-50%)
    right 3.2vw

.container
    flex-grow 1
    background-color rgb(246, 246, 246)
    display flex
    height 152.5vw
    overflow hidden

.asider
    width 24.8vw
    overflow auto
    background-color #fff
    flex-shrink 0
    
.asider::-webkit-scrollbar 
    width 0        

.asider li
    width 100%
    height 13.3vw
    flex-grow 1
    display flex
    justify-content center
    align-items center

.asider li span
    font-size 14px
    color: rgb(119, 119, 119);
    border-radius: 12px;
    height: 24px;
    width: 74px;
    text-align center
    line-height 24px

.asider li span.active
    background: linear-gradient(to right, rgb(230, 170, 92), rgb(208, 139, 48));
    color #fff
.content
    flex-grow 1
    padding 0 10px
    overflow auto

.content-img
    width 69.8vw
    height 20.3vw
    border-radius: 8px
    margin-top 2.67vw


.content-item
    background-color #fff
    margin-top 2.67vw
    border-radius: 8px
    display flex
    flex-wrap wrap
    padding 0 12px
    justify-content space-between

.content-item li
    text-align center
    margin 6px 0

.content-item p
    color: rgb(51, 51, 51);
    width 100%
    font-size: 14px;
    font-weight: bold;
    line-height: 23px;

.item-img
    width 17.6vw
    height 17.6vw

.content-item .detail-text
    color: rgb(119, 119, 119)
    font-size: 12px;
    font-weight 100
</style>